<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>select多选</title>
    <link rel="stylesheet" href="{{asset('admin/layui/layui/css/layui.css')}}" media="all">
</head>
<body>

<div id="demo1" class="xm-select-demo"></div>

<br/>
<div class="layui-form">
    <input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
    <input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
    <input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
    <input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">

    <br/><br/>
    <input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
    <input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
    <input type="checkbox" name="all" lay-filter="all" lay-skin="primary" title="展开所有节点">
    <input type="checkbox" name="close" lay-filter="close" lay-skin="primary" title="闭合所有节点">
    <input type="checkbox" name="key3" lay-filter="key3" lay-skin="primary" title="展开指定节点">

    <br/><br/>
    <input type="checkbox" name="clickExpand" lay-filter="clickExpand" lay-skin="primary" title="clickExpand" checked>
    <input type="checkbox" name="clickCheck" lay-filter="clickCheck" lay-skin="primary" title="clickExpand" checked>

</div>

<div style="margin-top: 20px">间距</div>
<div id="slideTest1"></div>

<script src="{{asset('common/js/jquery-3.4.1.min.js')}}" ></script>
<script src="{{asset('admin/layui/layui/layui.js')}}"></script>
<script src="{{asset('admin/layui/lib/extend/xm-select.js')}}" ></script>
<script>


    layui.form.render();

    ['showFolderIcon', 'showLine', 'strict', 'simple'].forEach(function(key){
        layui.form.on('checkbox('+key+')', function(data){
            var treeConfig = {};
            treeConfig[key] = data.elem.checked;
            demo1.update({
                tree: treeConfig
            })
        });
    })

    //控制显示父节点的图标
    layui.form.on('checkbox(hidden)', function(data){
        demo1.update({
            iconfont: {
                parent: data.elem.checked ? 'hidden' : '',
            }
        })
    });

    //自定义图标
    layui.form.on('checkbox(custom)', function(data){
        let iconfont = data.elem.checked ? {
            select: 'layui-icon layui-icon-chart',
            unselect: 'layui-icon-ok-circle',
            half: 'layui-icon layui-icon-table',
            parent: 'layui-icon layui-icon-survey',
        } : {
            select: '',
            unselect: '',
            half: '',
            parent: '',
        }
        demo1.update({
            iconfont: iconfont
        })
        layui.form.render();
    });

    //展开所有节点
    layui.form.on('checkbox(all)', function(data){
        if(data.elem.checked){
            demo1.changeExpandedKeys(true)
        }
    });

    //闭合所有节点
    layui.form.on('checkbox(close)', function(data){
        if(data.elem.checked){
            demo1.changeExpandedKeys(false)
        }
    });

    //展开指定节点
    layui.form.on('checkbox(key3)', function(data){
        if(data.elem.checked){
            demo1.changeExpandedKeys([ -3 ])
        }
    });

    layui.form.on('checkbox(clickExpand)', function(data){
        demo1.update({
            tree: {
                clickExpand: data.elem.checked
            }
        })
    });

    layui.form.on('checkbox(clickCheck)', function(data){
        demo1.update({
            tree: {
                clickCheck: data.elem.checked
            }
        })
    });

    layui.slider.render({
        elem: '#slideTest1',
        min: 10,
        max: 100,
        showstep: true,
        input: true,
        tips: true,
        value: 20,
        change: function(value){
            demo1.update({
                tree: {
                    indent: value
                }
            })
        }
    });

    var demo1 = xmSelect.render({
        el: '#demo1',
        autoRow: true,
        filterable: true,
        tree: {
            show: true,
            showFolderIcon: true,
            showLine: true,
            indent: 20,
            expandedKeys: [ -3 ],
        },
        toolbar: {
            show: true,
            list: ['ALL', 'REVERSE', 'CLEAR']
        },
        filterable: true,
        height: 'auto',
        data: function(){
            return [
                {name: '销售员', value: -1, disabled: true, children: [
                        {name: '张三1', value: 1, selected: true, children: []},
                        {name: '李四1', value: 2, selected: true},
                        {name: '王五1', value: 3, disabled: true},
                    ]},
                {name: '奖品', value: -2, children: [
                        {name: '奖品3', value: -3, children: [
                                {name: '苹果3', value: 14, selected: true},
                                {name: '香蕉3', value: 15},
                                {name: '葡萄3', value: 16},
                            ]},
                        {name: '苹果2', value: 4, selected: true, disabled: true},
                        {name: '香蕉2', value: 5},
                        {name: '葡萄2', value: 6},
                    ]},
            ]
        }
    })
</script>





</body>




</html>
